<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML 第 02 天 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/10.0fd16134.js" as="script"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link router-link-active">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link router-link-active">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>HTML</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/html/" aria-current="page" class="sidebar-link">HTML 学习</a></li><li><a href="/basenode/html/day01.html" class="sidebar-link">HTML 第 01 天</a></li><li><a href="/basenode/html/day02.html" aria-current="page" class="active sidebar-link">HTML 第 02 天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#第-02-天-能力目标" class="sidebar-link">第 02 天 - 能力目标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#html-标签-下-导读-08-38" class="sidebar-link">HTML 标签(下)导读（08'38''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_1☆-表格常用标签及属性-第-1-节课" class="sidebar-link">1☆. 表格常用标签及属性（第 1 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_1-1☆-表格标签基本使用-08-38" class="sidebar-link">1.1☆ 表格标签基本使用（08'38''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_1-2☆-表头单元格标签-02-30" class="sidebar-link">1.2☆ 表头单元格标签（02'30''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_1-3-表格相关属性-了解-08-24" class="sidebar-link">1.3 表格相关属性(了解)（08'24''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_1-4-「作业」小说排行榜案例-09-25" class="sidebar-link">1.4 「作业」小说排行榜案例（09'25''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_2☆-表格结构和常用列表-第-2-节课" class="sidebar-link">2☆. 表格结构和常用列表（第 2 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_2-1-表格结构标签-04-45" class="sidebar-link">2.1 表格结构标签（04'45''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_2-2-合并单元格-08-29" class="sidebar-link">2.2 合并单元格（08'29''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_2-3-表格总结-03-44" class="sidebar-link">2.3 表格总结（03'44''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_2-4☆-无序列表-08-47" class="sidebar-link">2.4☆ 无序列表（08'47''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_2-5-有序列表-03-20" class="sidebar-link">2.5 有序列表（03'20''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_3☆-自定义列表和表单-第-3-节课" class="sidebar-link">3☆. 自定义列表和表单（第 3 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_3-1☆-自定义列表-06-41" class="sidebar-link">3.1☆ 自定义列表（06'41''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_3-2-列表总结-02-54" class="sidebar-link">3.2 列表总结（02'54''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_3-3☆-表单使用场景以及分类-08-38" class="sidebar-link">3.3☆ 表单使用场景以及分类（08'38''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_3-4☆-表单域-05-26" class="sidebar-link">3.4☆ 表单域（05'26''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_3-5☆-input-之-type-属性文本框和密码框-06-19" class="sidebar-link">3.5☆ input 之 type 属性文本框和密码框（06'19''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_4☆-表单输入-第-4-节课" class="sidebar-link">4☆. 表单输入（第 4 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_4-1☆-input-之-type-属性提交和重置按钮-06-30" class="sidebar-link">4.1☆ input 之 type 属性提交和重置按钮（06'30''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_4-2☆-input-之-type-属性单选按钮和复选框-04-36" class="sidebar-link">4.2☆ input 之 type 属性单选按钮和复选框（04'36''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_4-3☆-input-之-name-和-value-属性-05-52" class="sidebar-link">4.3☆ input 之 name 和 value 属性（05'52''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_5☆-表单输入-第-5-节课" class="sidebar-link">5☆. 表单输入（第 5 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_5-1☆-input-之-checked-和-maxlength-属性-04-34" class="sidebar-link">5.1☆ input 之 checked 和 maxlength 属性（04'34''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_5-2☆-input-表单元素四个属性使用场景课堂问答-03-03" class="sidebar-link">5.2☆ input 表单元素四个属性使用场景课堂问答（03'03''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_5-3☆-input-之-type-属性普通按钮和文件域-04-14" class="sidebar-link">5.3☆ input 之 type 属性普通按钮和文件域（04'14''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_5-4☆-label-标签-06-10" class="sidebar-link">5.4☆ label 标签（06'10''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_5-5☆-select-下拉表单-08-38" class="sidebar-link">5.5☆ select 下拉表单（08'38''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_6☆-表单总结和案例-第-6-节课" class="sidebar-link">6☆. 表单总结和案例（第 6 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_6-1☆-textarea-文本域标签-05-13" class="sidebar-link">6.1☆ textarea 文本域标签（05'13''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_6-2☆-表单元素几点总结-02-55" class="sidebar-link">6.2☆ 表单元素几点总结（02'55''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_6-3-学会查阅文档-06-14" class="sidebar-link">6.3 学会查阅文档（06'14''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_6-4-综合案例-注册页面-一-08-22" class="sidebar-link">6.4 综合案例-注册页面(一)（08'22''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_7-附录" class="sidebar-link">7. 附录</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_7-1-标签" class="sidebar-link">7.1 标签</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_7-2-快捷键" class="sidebar-link">7.2 快捷键</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day02.html#_7-3-单词表" class="sidebar-link">7.3 单词表</a></li></ul></li></ul></li><li><a href="/basenode/html/html-note.html" class="sidebar-link">HTML 笔记</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="html-第-02-天"><a href="#html-第-02-天" class="header-anchor">#</a> HTML 第 02 天</h1> <h2 id="第-02-天-能力目标"><a href="#第-02-天-能力目标" class="header-anchor">#</a> 第 02 天 - 能力目标</h2> <ol><li>能够使用<strong>表格标签及属性</strong>实现表格类结构的搭建，如<strong>个人信息</strong>；</li> <li>能够使用<strong>三种列表</strong>标签实现列表类结构的搭建，如 XXX；</li> <li>能够使用<strong>表单及输入项</strong>实现表单类结构的搭建，如<strong>注册或登录表单</strong>。</li></ol> <h3 id="html-标签-下-导读-08-38"><a href="#html-标签-下-导读-08-38" class="header-anchor">#</a> HTML 标签(下)导读（08'38''）</h3> <blockquote><p>过渡视频，介绍第 02 天的学习路径：</p></blockquote> <ol><li>表格及属性</li> <li>三种列表</li> <li>表单及输入项</li> <li>综合案例</li> <li>查阅文档</li></ol> <h2 id="_1☆-表格常用标签及属性-第-1-节课"><a href="#_1☆-表格常用标签及属性-第-1-节课" class="header-anchor">#</a> 1☆. 表格常用标签及属性（第 1 节课）</h2> <h3 id="_1-1☆-表格标签基本使用-08-38"><a href="#_1-1☆-表格标签基本使用-08-38" class="header-anchor">#</a> 1.1☆ 表格标签基本使用（08'38''）</h3> <h4 id="_1-1-1-「表格标签基本使用」内容"><a href="#_1-1-1-「表格标签基本使用」内容" class="header-anchor">#</a> 1.1.1 「表格标签基本使用」内容</h4> <ul><li>问题 1：表格的主要作用是什么？</li> <li>问题 2：常用的表格标签有几个？分别代表什么含义？</li> <li>问题 3：表格内容是写在哪个标签中的？</li></ul> <h4 id="_1-1-2-「表格标签基本使用」重点"><a href="#_1-1-2-「表格标签基本使用」重点" class="header-anchor">#</a> 1.1.2 「表格标签基本使用」重点</h4> <ol><li><p>表格的作用：</p> <ul><li>以<strong>行、列</strong>的方式（表格）<strong>整齐</strong>地<strong>展示数据</strong>，例如：股票价格；</li> <li>「知道」老的前端人员会用表格布局页面（后续讲到布局会给大家扩展）</li></ul></li> <li><p>表格的基本语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>单元格内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    ... 重复 td → 单元格
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
  ... 重复 tr → 行
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>三个基本的表格标签：</p> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>table</code></td> <td>表格标签，用于包含多个 <code>tr</code></td></tr> <tr><td>2</td> <td><code>tr</code></td> <td>定义表格中的行，用于包含多个 <code>td</code></td></tr> <tr><td>3</td> <td><code>td</code></td> <td>定义表格中的单元格，用于存放单元格内容</td></tr></tbody></table> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <ul><li>table 和 tr 是用来搭建表格结构的，不能存放实际内容；</li> <li>td 是用来存放单元格数据的。</li></ul></div></li></ol> <h4 id="_1-1-3-「表格标签基本使用」课堂练习-05-00"><a href="#_1-1-3-「表格标签基本使用」课堂练习-05-00" class="header-anchor">#</a> 1.1.3 「表格标签基本使用」课堂练习（05'00'')</h4> <ol><li><p>新建 <code>01-表格基础语法.html</code></p></li> <li><p>制作当前所在座位同桌<strong>姓名</strong>、<strong>性别</strong>的表格，示例如下：</p> <img src="/basenode/assets/img/table-prctice-01.3f4121a3.png" width="188"> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 VSCode 中先<strong>选中多行文本</strong>，再按 <code>alt + shift + ↑ / ↓</code> 可以一次复制多行。</p></div></li></ol> <h3 id="_1-2☆-表头单元格标签-02-30"><a href="#_1-2☆-表头单元格标签-02-30" class="header-anchor">#</a> 1.2☆ 表头单元格标签（02'30''）</h3> <h4 id="_1-2-1-「表头单元格标签」内容"><a href="#_1-2-1-「表头单元格标签」内容" class="header-anchor">#</a> 1.2.1 「表头单元格标签」内容</h4> <ul><li>问题 1：表头标签的作用是什么？标签是什么？</li> <li>问题 2：表头单元格能存放内容吗？与 td 的显示有什么区别？</li></ul> <h4 id="_1-2-2-「表头单元格标签」重点"><a href="#_1-2-2-「表头单元格标签」重点" class="header-anchor">#</a> 1.2.2 「表头单元格标签」重点</h4> <ul><li>在大多数表格中，<strong>第一行</strong>通常用来<strong>显示标题</strong>而不是实际的数据，这样可以方便用户阅读和理解下放表格数据的含义；</li> <li><strong>表头单元格</strong>（<code>th</code>）同样可以存放内容，但是默认会被<strong>加粗并且居中</strong>显示。</li></ul> <h4 id="_1-2-3-「表头单元格标签」课堂练习-02-00"><a href="#_1-2-3-「表头单元格标签」课堂练习-02-00" class="header-anchor">#</a> 1.2.3 「表头单元格标签」课堂练习（02'00'')</h4> <ul><li><p>修改 <code>01-表格基础语法.html</code> 的代码，将第一行中的 <code>td</code> 标签替换为 <code>th</code> 标签；</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 VSCode 中，<code>ctrl + d</code> 可以向后多选相同的内容，以便统一修改。</p></div></li></ul> <h3 id="_1-3-表格相关属性-了解-08-24"><a href="#_1-3-表格相关属性-了解-08-24" class="header-anchor">#</a> 1.3 表格相关属性(了解)（08'24''）</h3> <h4 id="_1-3-1-「表格相关属性-了解-」内容"><a href="#_1-3-1-「表格相关属性-了解-」内容" class="header-anchor">#</a> 1.3.1 「表格相关属性(了解)」内容</h4> <ul><li>问题 1：表格属性应该写在哪一个标签中？为什么？</li> <li>问题 2：<code>padding</code> 是谁和谁之间的距离？</li> <li>问题 3：<code>spacing</code> 是谁和谁之间的距离？</li></ul> <h4 id="_1-3-2-「表格相关属性-了解-」重点"><a href="#_1-3-2-「表格相关属性-了解-」重点" class="header-anchor">#</a> 1.3.2 「表格相关属性(了解)」重点</h4> <ul><li><p><strong>属性</strong>是用来描述标签的特征（显示效果）的，因此属性都应该写在 <code>table</code> 标签中</p></li> <li><p>属性语法复习：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">属性1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>值1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">属性2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>值2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li><strong>属性名</strong>不需要引号</li> <li><strong>属性值</strong>必须要用引号，通常使用双引号</li> <li><code>属性=&quot;值&quot;</code> 这种定义方式又被称为<strong>键值对</strong> —— 属性名：键 / 属性值：值 / 成对出现</li> <li>每一个<strong>键值对之间</strong>使用<strong>空格</strong>分隔</li></ul></li> <li><p>表格的常用属性：</p> <table><thead><tr><th>属性名</th> <th>属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>align</td> <td><code>left</code>、<code>center</code>、<code>right</code></td> <td>对齐方式</td></tr> <tr><td>border</td> <td><strong>宽度像素值</strong>或 &quot;&quot;</td> <td>表格边框，默认 &quot;&quot; 无边框</td></tr> <tr><td>width</td> <td>像素值</td> <td>宽度</td></tr> <tr><td>height</td> <td>像素值</td> <td>高度</td></tr> <tr><td>cellspacing</td> <td>像素值</td> <td>单元格之间的间距，默认 2 像素</td></tr> <tr><td>cellpadding</td> <td>像素值</td> <td>内容与边框之间的距离，默认 1 像素</td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>padding 这个单词和含义很重要，务必理解并记忆。</p></div></li></ul> <h4 id="_1-3-3-「表格相关属性-了解-」课堂练习-05-00"><a href="#_1-3-3-「表格相关属性-了解-」课堂练习-05-00" class="header-anchor">#</a> 1.3.3 「表格相关属性(了解)」课堂练习（05'00'')</h4> <ul><li><p>修改 <code>01-表格基础语法.html</code> 的代码，让表格居中显示，设置表格边框、宽度、高度、内容间距和单元格间距。</p></li> <li><p>示例代码如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span>
  <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>table 的属性在 VSCode 中智能提示不够友好，以上属性后续可以通过 CSS 设置。</p></div></li></ul> <h3 id="_1-4-「作业」小说排行榜案例-09-25"><a href="#_1-4-「作业」小说排行榜案例-09-25" class="header-anchor">#</a> 1.4 「作业」小说排行榜案例（09'25''）</h3> <h4 id="「小说排行榜案例」练习目标"><a href="#「小说排行榜案例」练习目标" class="header-anchor">#</a> 「小说排行榜案例」练习目标</h4> <ol><li>练习：<code>table</code>、<code>tr</code>、<code>th</code>、<code>td</code> 标签</li> <li>练习：<code>align</code>、<code>border</code>、<code>cellpadding</code>、<code>cellspacing</code>、<code>width</code>、<code>height</code> 属性</li> <li>复习：<code>img</code>、<code>a</code> 标签</li></ol> <h2 id="_2☆-表格结构和常用列表-第-2-节课"><a href="#_2☆-表格结构和常用列表-第-2-节课" class="header-anchor">#</a> 2☆. 表格结构和常用列表（第 2 节课）</h2> <h3 id="_2-1-表格结构标签-04-45"><a href="#_2-1-表格结构标签-04-45" class="header-anchor">#</a> 2.1 表格结构标签（04'45''）</h3> <h4 id="_2-1-1-「表格结构标签」内容"><a href="#_2-1-1-「表格结构标签」内容" class="header-anchor">#</a> 2.1.1 「表格结构标签」内容</h4> <ul><li>问题 1：就<strong>语义</strong>而言，表格可以被划分成哪两个区域？分别对应什么标签？</li> <li>问题 2：结构标签能够存放单元格的内容吗？为什么？</li> <li>问题 3：视频中，老师有做删除之前代码的操作吗？为什么？</li></ul> <h4 id="_2-1-2-「表格结构标签」重点"><a href="#_2-1-2-「表格结构标签」重点" class="header-anchor">#</a> 2.1.2 「表格结构标签」重点</h4> <ul><li>就<strong>语义</strong>而言，表格可以被划分成以下两个区域：
<ul><li><code>thead</code> 定义表格头部（标题行），必须拥有 <code>tr</code> 标签，一般位于第一行；</li> <li><code>tbody</code> 定义表格的主体，通常包含标题行下方的表格数据区域；</li></ul></li> <li><code>thead</code> 和 <code>tbody</code> 只是用来划分表格结构的，区分标题行和数据区域，不能替代原有的 <code>tr</code>、<code>th</code>、<code>td</code> 标签的作用。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>表格中实际要显示的内容，需要放在 <code>th</code> 或 <code>td</code> 标签中，其他标签仅是用来搭建表格结构或者增强表格结构的语义的。</p></div> <h3 id="_2-2-合并单元格-08-29"><a href="#_2-2-合并单元格-08-29" class="header-anchor">#</a> 2.2 合并单元格（08'29''）</h3> <h4 id="_2-2-1-「合并单元格」场景"><a href="#_2-2-1-「合并单元格」场景" class="header-anchor">#</a> 2.2.1 「合并单元格」场景</h4> <blockquote><p>合并单元格场景示例如下：</p></blockquote> <p><img src="/basenode/assets/img/table-span-sample.e529199f.png" alt="合并单元格示例"></p> <p>在开发中，有时候需要：</p> <ol><li>把<strong>一行</strong>中的多个单元格合并，在<strong>横向</strong>上显示更多的内容；</li> <li>把<strong>一列</strong>中的多个单元格合并，在<strong>纵向</strong>上显示更多的内容。</li></ol> <h4 id="_2-2-2-「合并单元格」内容"><a href="#_2-2-2-「合并单元格」内容" class="header-anchor">#</a> 2.2.2 「合并单元格」内容</h4> <ul><li>问题 1：合并单元格有那两种方式？</li> <li>问题 2：合并单元格的步骤是什么？</li> <li>问题 3：合并单元格的属性写在哪一个标签上？</li></ul> <h4 id="_2-2-3-「合并单元格」重点"><a href="#_2-2-3-「合并单元格」重点" class="header-anchor">#</a> 2.2.3 「合并单元格」重点</h4> <ol><li>合并单元格的方式：
<ol><li>跨<strong>行</strong>合并（<code>rowspan</code>），把多个行的单元格合并 → <strong>纵向</strong>合并</li> <li>跨<strong>列</strong>合并（<code>colspan</code>），把多个列的单元格合并 → <strong>横向</strong>合并</li></ol></li> <li>合并单元格的步骤：
<ol><li>明确合并方式（跨行 / 跨列）</li> <li>找到目标单元格 <code>td</code>，增加合并单元格<strong>属性</strong> <ol><li>跨行 <code>rowspan=&quot;x&quot;</code>（纵向）</li> <li>跨列 <code>colspan=&quot;y&quot;</code>（横向）</li></ol></li> <li>删除多余的单元格</li></ol></li></ol> <h4 id="_2-2-4-「合并单元格」课堂练习-05-00"><a href="#_2-2-4-「合并单元格」课堂练习-05-00" class="header-anchor">#</a> 2.2.4 「合并单元格」课堂练习（05'00'')</h4> <ol><li><p>新建 <code>02-个人简历部分.html</code>；</p></li> <li><p>复制以下表格的基础代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span>
  <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>640<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>240<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>学生信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>姓名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>巨小帅<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>班级：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>合肥10期<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>出生日期：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>2000-02-14<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>性别：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>小帅<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>手机号：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>110<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>微信号：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>119<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>将一下照片保存到 <code>images</code> 文件夹下，重命名为 <code>wlh.jpg</code>：</p> <p><img src="/basenode/assets/img/wlh.89f3d5c3.jpg" alt="案例照片"></p></li> <li><p>案例要求：</p> <ol><li>合并标题行；</li> <li>合并最后一列，并显示照片。</li></ol></li> <li><p>合并标题行参考代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>学生信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>合并照片列参考代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/wlh.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_2-3-表格总结-03-44"><a href="#_2-3-表格总结-03-44" class="header-anchor">#</a> 2.3 表格总结（03'44''）</h3> <blockquote><p>表格知识点总结视频：</p></blockquote> <ol><li>表格标签</li> <li>表格属性</li> <li>合并单元格</li></ol> <h3 id="_2-4☆-无序列表-08-47"><a href="#_2-4☆-无序列表-08-47" class="header-anchor">#</a> 2.4☆ 无序列表（08'47''）</h3> <h4 id="_2-4-1-「无序列表」内容"><a href="#_2-4-1-「无序列表」内容" class="header-anchor">#</a> 2.4.1 「无序列表」内容</h4> <ul><li>问题 1：列表的主要是用来做什么的？</li> <li>问题 2：我们一共要学习几种列表？</li> <li>问题 3：无序列表一共有几个标签？分别是什么，作用是什么？有什么注意事项？</li></ul> <h4 id="_2-4-2-「无序列表」重点"><a href="#_2-4-2-「无序列表」重点" class="header-anchor">#</a> 2.4.2 「无序列表」重点</h4> <ul><li><p>列表就是<strong>用来布局</strong>的，可以<strong>整齐、有序的展示数据</strong>，用列表做布局会更加自由和方便；</p></li> <li><p>列表包括：无序列表（<code>ul</code>）、有序列表（<code>ol</code>）和自定义列表（<code>dl</code>）</p></li> <li><p>无序列表的的基本语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>列表项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>列表项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>列表项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>两个无序列表标签：</p> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>ul</code></td> <td>无序列表，只允许包含多个 <code>li</code> 标签</td></tr> <tr><td>2</td> <td><code>li</code></td> <td>用于存放列表项内容</td></tr></tbody></table> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <ul><li><code>ul</code> 是用来搭建结构的，不能存放实际内容；</li> <li><code>ul</code> 只允许包含多个 <code>li</code> 标签；</li> <li><code>li</code> 是用来存放列表项数据的。</li></ul></div></li></ul> <h4 id="_2-4-3-「无序列表」课堂练习-05-00"><a href="#_2-4-3-「无序列表」课堂练习-05-00" class="header-anchor">#</a> 2.4.3 「无序列表」课堂练习（05'00'')</h4> <ol><li>新建 <code>03-无序列表.html</code>；</li> <li>用无序列表展示已经学习过的标签，至少 10 个。</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 VSCode 中连续输入 <code>ul&gt;li*6{h$}</code> 然后回车看看效果 🙂。</p></div> <h3 id="_2-5-有序列表-03-20"><a href="#_2-5-有序列表-03-20" class="header-anchor">#</a> 2.5 有序列表（03'20''）</h3> <h4 id="_2-5-1-「有序列表」内容"><a href="#_2-5-1-「有序列表」内容" class="header-anchor">#</a> 2.5.1 「有序列表」内容</h4> <ul><li>问题 1：有序列表和无序列表有什么区别？</li> <li>问题 2：有序列表除了序号之外，与无序列表的使用及注意事项有区别吗？</li></ul> <h4 id="_2-5-2-「有序列表」重点"><a href="#_2-5-2-「有序列表」重点" class="header-anchor">#</a> 2.5.2 「有序列表」重点</h4> <ul><li><p>有序列表 <code>ol</code> 会在列表项前面自动增加数字排序，并且排序依次递增；</p></li> <li><p>有序列表的的基本语法与无序列表基本一直，只需要把 <code>ul</code> 替换成 <code>ol</code> 即可：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>列表项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>列表项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>列表项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>有序列表除了序号之外，与无序列表的使用及注意事项没有区别。</p></li></ul> <h2 id="_3☆-自定义列表和表单-第-3-节课"><a href="#_3☆-自定义列表和表单-第-3-节课" class="header-anchor">#</a> 3☆. 自定义列表和表单（第 3 节课）</h2> <h3 id="_3-1☆-自定义列表-06-41"><a href="#_3-1☆-自定义列表-06-41" class="header-anchor">#</a> 3.1☆ 自定义列表（06'41''）</h3> <h4 id="_3-1-1-「自定义列表」内容"><a href="#_3-1-1-「自定义列表」内容" class="header-anchor">#</a> 3.1.1 「自定义列表」内容</h4> <ul><li>问题 1：自定义列表的应用场景是什么？</li> <li>问题 2：自定义列表的标签有几个？分别代表什么含义？</li> <li>问题 3：自定义列表的内容是写在哪个标签中的？</li></ul> <h4 id="_3-1-2-「自定义列表」重点"><a href="#_3-1-2-「自定义列表」重点" class="header-anchor">#</a> 3.1.2 「自定义列表」重点</h4> <ul><li><p>应用场景：网站首页下方的网站导航通常可以使用自定义列表来实现；</p></li> <li><p>自定义列表的基本语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
    ...
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
    ...
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>虽然一个 <code>dl</code> 中可以包含多个 <code>dt</code>，但是在实际开发中通常只包含一个 <code>dt</code>，因为这样更方便布局。</p></div></li> <li><p>三个自定义列表标签：</p> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>dl</code></td> <td>自定义列表，只允许包含 <code>dt</code> 和 <code>dd</code> 标签</td></tr> <tr><td>2</td> <td><code>dt</code></td> <td>用于存放<strong>关键词</strong>(term)内容，与 <code>dd</code> 是兄弟关系，不过后续的 <code>dd</code> 都跟随前面的 <code>dt</code></td></tr> <tr><td>3</td> <td><code>dd</code></td> <td>用于存放前面 <code>dt</code> 关键词的列表项内容</td></tr></tbody></table></li></ul> <h4 id="_3-1-3-「自定义列表」课堂练习-05-00"><a href="#_3-1-3-「自定义列表」课堂练习-05-00" class="header-anchor">#</a> 3.1.3 「自定义列表」课堂练习（05'00'')</h4> <ol><li><p>新建 <code>04-自定义列表.html</code>；</p></li> <li><p>实现<strong>两</strong>个自定义列表：</p> <div class="language-txt extra-class"><pre class="language-text"><code>帮助中心
  账户管理
  购物指南
  订单操作
服务支持
  售后政策
  自助服务
  相关下载
</code></pre></div></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 VSCode 中连续输入 <code>dl&gt;dt+dd*3</code> 然后回车看看效果 🙂。</p></div> <h3 id="_3-2-列表总结-02-54"><a href="#_3-2-列表总结-02-54" class="header-anchor">#</a> 3.2 列表总结（02'54''）</h3> <blockquote><p>列表知识点总结视频：</p></blockquote> <ol><li>有序列表</li> <li>无序列表</li> <li>自定义列表</li></ol> <h3 id="_3-3☆-表单使用场景以及分类-08-38"><a href="#_3-3☆-表单使用场景以及分类-08-38" class="header-anchor">#</a> 3.3☆ 表单使用场景以及分类（08'38''）</h3> <h4 id="_3-3-1-「表单使用场景以及分类」内容"><a href="#_3-3-1-「表单使用场景以及分类」内容" class="header-anchor">#</a> 3.3.1 「表单使用场景以及分类」内容</h4> <ul><li>问题 1：表单的应用场景是什么？</li> <li>问题 2：表单由那几部分组成？</li></ul> <h4 id="_3-3-2-「表单使用场景以及分类」重点"><a href="#_3-3-2-「表单使用场景以及分类」重点" class="header-anchor">#</a> 3.3.2 「表单使用场景以及分类」重点</h4> <ul><li>应用场景：在开发网站时，可以使用表单<strong>收集用户信息</strong>，<strong>统一提交给后台</strong>处理；</li> <li>一个完整的表单通常包含 3 个部分：
<ol><li><strong>表单域</strong>：整个表单区域，<strong>统一</strong>汇总要收集的数据，<strong>统一</strong>提交给后台，例如包含姓名、性别等完整的用户信息记录；</li> <li><strong>表单控件</strong>（表单元素）：与用户交互，允许用户输入或者选择<strong>单个</strong>具体的信息，例如姓名；</li> <li><strong>提示信息</strong>：提示用户每一个表单控件是收集什么信息的。</li></ol></li></ul> <h3 id="_3-4☆-表单域-05-26"><a href="#_3-4☆-表单域-05-26" class="header-anchor">#</a> 3.4☆ 表单域（05'26''）</h3> <h4 id="_3-4-1-「表单域」内容"><a href="#_3-4-1-「表单域」内容" class="header-anchor">#</a> 3.4.1 「表单域」内容</h4> <ul><li>问题 1：表单域的作用是什么？</li> <li>问题 2：表单域的标签是什么？</li> <li>问题 3：视频中介绍了几个表单域的属性？基础班阶段需要理解或记忆这些属性吗？</li></ul> <h4 id="_3-4-2-「表单域」重点"><a href="#_3-4-2-「表单域」重点" class="header-anchor">#</a> 3.4.2 「表单域」重点</h4> <ul><li><p>表单域的作用就是实现用户信息的收集与传递，例如收集用户的完整信息，然后统一传递给后台；</p></li> <li><p>表单的基本语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
  ... 表单控件 ... 提示信息
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ul> <h3 id="_3-5☆-input-之-type-属性文本框和密码框-06-19"><a href="#_3-5☆-input-之-type-属性文本框和密码框-06-19" class="header-anchor">#</a> 3.5☆ input 之 type 属性文本框和密码框（06'19''）</h3> <h4 id="_3-5-1-「input-之-type-属性文本框和密码框」内容"><a href="#_3-5-1-「input-之-type-属性文本框和密码框」内容" class="header-anchor">#</a> 3.5.1 「input 之 type 属性文本框和密码框」内容</h4> <ul><li>问题 1：表单控件的作用是什么？</li> <li>问题 2：表单控件可以分为几大类？</li> <li>问题 3：input 标签的必须属性是什么？有什么作用？</li> <li>问题 4：input 标签是单标签还是双标签？为什么？</li></ul> <h4 id="_3-5-2-「input-之-type-属性文本框和密码框」重点"><a href="#_3-5-2-「input-之-type-属性文本框和密码框」重点" class="header-anchor">#</a> 3.5.2 「input 之 type 属性文本框和密码框」重点</h4> <ul><li><p>用户通过表单控件能够<strong>输入</strong>或者<strong>选择</strong>内容，以达到通过表单收集信息的目的。</p></li> <li><p>表单控件包含以下三大类：</p> <ol><li><code>input</code> 输入</li> <li><code>select</code> 选择</li> <li><code>textarea</code> 文本域</li></ol></li> <li><p><code>input</code> 标签的基本语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>属性值<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div></li> <li><p><code>input</code> 标签 <code>type</code> 的常用属性值：</p> <table><thead><tr><th>类型</th> <th>属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>输入</td> <td>text</td> <td>输入文字</td></tr> <tr><td>输入</td> <td>password</td> <td>密码</td></tr> <tr><td>选择</td> <td>radio</td> <td>单选按钮，多选一</td></tr> <tr><td>选择</td> <td>checkbox</td> <td>复选框（打勾）</td></tr> <tr><td>点击选择文件</td> <td>file</td> <td>文件上传使用</td></tr> <tr><td>点击</td> <td>button</td> <td>按钮</td></tr> <tr><td>点击</td> <td>image</td> <td>按钮</td></tr> <tr><td>表单操作</td> <td>submit</td> <td>提交，会把数据发送给服务器</td></tr> <tr><td>表单操作</td> <td>reset</td> <td>重置，会清空表单所有数据</td></tr></tbody></table></li></ul> <h4 id="_3-5-3-「input-之-type-属性文本框和密码框」课堂练习-05-00"><a href="#_3-5-3-「input-之-type-属性文本框和密码框」课堂练习-05-00" class="header-anchor">#</a> 3.5.3 「input 之 type 属性文本框和密码框」课堂练习（05'00'')</h4> <ol><li><p>新建 <code>05-表单练习.html</code>;</p></li> <li><p>使用自定义列表完善老师视频中的代码。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>用户名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>密<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>码：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>特殊符号 <code>&amp;emsp;</code> 是一个全角的中文空格，在界面布局时有时候非常有用 🙂。</p></div></li></ol> <h2 id="_4☆-表单输入-第-4-节课"><a href="#_4☆-表单输入-第-4-节课" class="header-anchor">#</a> 4☆. 表单输入（第 4 节课）</h2> <h3 id="_4-1☆-input-之-type-属性提交和重置按钮-06-30"><a href="#_4-1☆-input-之-type-属性提交和重置按钮-06-30" class="header-anchor">#</a> 4.1☆ input 之 type 属性提交和重置按钮（06'30''）</h3> <h4 id="_4-1-1-「input-之-type-属性提交和重置按钮」内容"><a href="#_4-1-1-「input-之-type-属性提交和重置按钮」内容" class="header-anchor">#</a> 4.1.1 「input 之 type 属性提交和重置按钮」内容</h4> <ul><li>问题 1：提交按钮的作用是什么？</li> <li>问题 2：重置按钮的作用是什么？</li> <li>问题 3：视频中的 value 属性有什么用处？</li></ul> <h4 id="_4-1-2-「input-之-type-属性提交和重置按钮」重点"><a href="#_4-1-2-「input-之-type-属性提交和重置按钮」重点" class="header-anchor">#</a> 4.1.2 「input 之 type 属性提交和重置按钮」重点</h4> <ul><li>提交按钮（sumbit) 可以把<strong>表单域</strong>中的数据提交给后台；</li> <li>重置按钮（reset) 可以把<strong>表单域</strong>中的数据清空；</li> <li>通过 <code>value</code> 属性可以指定<strong>提交</strong>按钮或<strong>重置</strong>按钮中的文字。</li></ul> <h4 id="_4-1-3-「input-之-type-属性提交和重置按钮」课堂练习-05-00"><a href="#_4-1-3-「input-之-type-属性提交和重置按钮」课堂练习-05-00" class="header-anchor">#</a> 4.1.3 「input 之 type 属性提交和重置按钮」课堂练习（05'00'')</h4> <ol><li><p>修改 <code>05-表单练习.html</code>;</p></li> <li><p>增加 <code>dt</code> 及 <code>dd</code>，分别实现<strong>提交</strong>和<strong>重置</strong>功能；</p></li> <li><p>浏览页面，观察页面执行效果。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reset<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>点击提交按钮在<strong>地址栏</strong>看不到输入的数据，这是为什么呢？</p></div></li></ol> <h3 id="_4-2☆-input-之-type-属性单选按钮和复选框-04-36"><a href="#_4-2☆-input-之-type-属性单选按钮和复选框-04-36" class="header-anchor">#</a> 4.2☆ input 之 type 属性单选按钮和复选框（04'36''）</h3> <h4 id="_4-2-1-「input-之-type-属性单选按钮和复选框」内容"><a href="#_4-2-1-「input-之-type-属性单选按钮和复选框」内容" class="header-anchor">#</a> 4.2.1 「input 之 type 属性单选按钮和复选框」内容</h4> <ul><li>问题 1：单选框的应用场景是什么？</li> <li>问题 2：复选框的应用场景是什么？</li></ul> <h4 id="_4-2-2-「input-之-type-属性单选按钮和复选框」重点"><a href="#_4-2-2-「input-之-type-属性单选按钮和复选框」重点" class="header-anchor">#</a> 4.2.2 「input 之 type 属性单选按钮和复选框」重点</h4> <ul><li>在<strong>多选一</strong>的时候，使用单选框（radio），例如：性别；</li> <li>在<strong>多选多</strong>的时候，使用复选框（checkbox)，例如：爱好。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在开发时，无论是<strong>单选</strong>还是<strong>复选</strong>，都不适合提供太多选项 —— 会让用户出现选择障碍。</p></div> <h4 id="_4-2-3-「input-之-type-属性单选按钮和复选框」课堂练习-05-00"><a href="#_4-2-3-「input-之-type-属性单选按钮和复选框」课堂练习-05-00" class="header-anchor">#</a> 4.2.3 「input 之 type 属性单选按钮和复选框」课堂练习（05'00'')</h4> <ol><li><p>修改 <code>05-表单练习.html</code>;</p></li> <li><p>增加 <code>dd</code>，并添加<strong>性别</strong>单选框和<strong>爱好</strong>复选框；</p></li> <li><p>浏览页面，观察页面执行效果。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>性<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>别：小帅 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 小美 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
  爱<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>好：吃饭 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 睡觉
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 打豆豆 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>浏览页面会发现单选同样可以被多选，这是为什么？</p></div></li></ol> <h3 id="_4-3☆-input-之-name-和-value-属性-05-52"><a href="#_4-3☆-input-之-name-和-value-属性-05-52" class="header-anchor">#</a> 4.3☆ input 之 name 和 value 属性（05'52''）</h3> <h4 id="_4-3-1-「input-之-name-和-value-属性」内容"><a href="#_4-3-1-「input-之-name-和-value-属性」内容" class="header-anchor">#</a> 4.3.1 「input 之 name 和 value 属性」内容</h4> <ul><li>问题 1：哪一个属性能够把表单控件区分开？（不同的控件负责收集不同的信息）</li> <li>问题 2：怎样能够在多个单选按钮中，只允许用户选择一项？</li> <li>问题 3：大家猜一猜，哪一个属性可以记录用户在表单中输入的值？</li></ul> <h4 id="_4-3-2-「input-之-name-和-value-属性」重点"><a href="#_4-3-2-「input-之-name-和-value-属性」重点" class="header-anchor">#</a> 4.3.2 「input 之 name 和 value 属性」重点</h4> <ul><li><code>name</code> 属性可以把表单控件区分开；</li> <li><code>value</code> 属性可以记录用户在控件中输入的值或者选择结果。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><strong>同一组</strong>单选框或复选框，<code>name</code> 属性的值应该一致。</p></div> <h4 id="_4-3-3-「input-之-name-和-value-属性」课堂练习-05-00"><a href="#_4-3-3-「input-之-name-和-value-属性」课堂练习-05-00" class="header-anchor">#</a> 4.3.3 「input 之 name 和 value 属性」课堂练习（05'00'')</h4> <ol><li><p>修改 <code>05-表单练习.html</code>;</p></li> <li><p>增加 <code>dd</code>，并添加<strong>期望</strong>单选框（月薪过万 8 千也行 给钱就行）；</p></li> <li><p>给已有控件增加 <code>name</code> 属性，要保证每一组的 <code>name</code> 值一致。</p></li> <li><p>浏览页面，观察页面执行效果；</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>用户名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>密<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>码：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pwd<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
  性<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>别：小帅 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 小美
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
  爱<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>好：吃饭 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 睡觉
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 打豆豆
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
  期<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>望：月薪过万 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 8千也行
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 给钱就行
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>给每个输入项增加 <code>value</code> 属性，再次浏览页面，观察页面执行效果。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>用户名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>密<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>码：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pwd<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
  性<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>别：小帅 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>male<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 小美
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>female<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
  爱<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>好：吃饭 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>eat<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 睡觉
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sleep<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 打豆豆
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>likeDouDou<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>
  期<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>望：月薪过万
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10000<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 8千也行
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8000<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 给钱就行
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h2 id="_5☆-表单输入-第-5-节课"><a href="#_5☆-表单输入-第-5-节课" class="header-anchor">#</a> 5☆. 表单输入（第 5 节课）</h2> <h3 id="_5-1☆-input-之-checked-和-maxlength-属性-04-34"><a href="#_5-1☆-input-之-checked-和-maxlength-属性-04-34" class="header-anchor">#</a> 5.1☆ input 之 checked 和 maxlength 属性（04'34''）</h3> <h4 id="_5-1-1-「input-之-checked-和-maxlength-属性」内容"><a href="#_5-1-1-「input-之-checked-和-maxlength-属性」内容" class="header-anchor">#</a> 5.1.1 「input 之 checked 和 maxlength 属性」内容</h4> <ul><li>问题 1：<code>checked</code> 属性的应用场景是什么？</li> <li>问题 2：<code>maxlength</code> 属性的应用场景是什么？</li></ul> <h4 id="_5-1-2-「input-之-checked-和-maxlength-属性」重点"><a href="#_5-1-2-「input-之-checked-和-maxlength-属性」重点" class="header-anchor">#</a> 5.1.2 「input 之 checked 和 maxlength 属性」重点</h4> <ul><li><p>如果用户要修改<strong>之前保存过的信息</strong>，<code>checked</code> 属性可以选中用户之前的选择，例如：修改个人信息；</p></li> <li><p>用 <code>checked</code> 属性可以帮助用户<strong>默认同意用户协议</strong>；</p></li> <li><p>某写输入项有长度限制时，可以使用 <code>maxlength</code> 属性；</p></li> <li><p><code>input</code> 标签的常用属性：</p> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>type</td> <td>类型</td></tr> <tr><td>name</td> <td>名称，用于区分控件</td></tr> <tr><td>value</td> <td>值，用于记录或设置控件的值</td></tr> <tr><td>checked</td> <td>默认选中某个单选或复选框</td></tr> <tr><td>maxlength</td> <td>输入框最大输入长度</td></tr></tbody></table></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 H5 中 <code>checked=&quot;checked&quot;</code> 可以简写为 <code>checked</code>。</p></div> <h3 id="_5-2☆-input-表单元素四个属性使用场景课堂问答-03-03"><a href="#_5-2☆-input-表单元素四个属性使用场景课堂问答-03-03" class="header-anchor">#</a> 5.2☆ input 表单元素四个属性使用场景课堂问答（03'03''）</h3> <blockquote><p>input 表单知识点总结视频：</p></blockquote> <ol><li>打开页面就有值（用户之前输入的信息 / 按钮的默认文字） —— <code>value</code></li> <li>区分控件的属性值 —— <code>name</code></li> <li>多个单选怎么做到多选一 —— 相同的 <code>name</code></li> <li>打开页面就选中 —— <code>checked</code></li> <li>input 标签的形态 —— <code>type</code></li></ol> <h3 id="_5-3☆-input-之-type-属性普通按钮和文件域-04-14"><a href="#_5-3☆-input-之-type-属性普通按钮和文件域-04-14" class="header-anchor">#</a> 5.3☆ input 之 type 属性普通按钮和文件域（04'14''）</h3> <h4 id="_5-3-1-「input-之-type-属性普通按钮和文件域」内容"><a href="#_5-3-1-「input-之-type-属性普通按钮和文件域」内容" class="header-anchor">#</a> 5.3.1 「input 之 type 属性普通按钮和文件域」内容</h4> <ul><li>问题 1：哪一个属性可以设置普通按钮的显示文字？</li> <li>问题 2：上传文件的 <code>type</code> 属性值是什么？</li> <li>问题 3：点击普通按钮能提交表单吗？</li></ul> <h4 id="_5-3-2-「input-之-type-属性普通按钮和文件域」重点"><a href="#_5-3-2-「input-之-type-属性普通按钮和文件域」重点" class="header-anchor">#</a> 5.3.2 「input 之 type 属性普通按钮和文件域」重点</h4> <ul><li>用 <code>value</code> 属性可以设置普通按钮的属性值；</li> <li>上传文件的 <code>type</code> 属性值是 <code>file</code>；</li> <li>点击普通按钮不能提交表单，后续学习了 JavaScript 之后普通按钮就非常有用了。</li></ul> <h3 id="_5-4☆-label-标签-06-10"><a href="#_5-4☆-label-标签-06-10" class="header-anchor">#</a> 5.4☆ label 标签（06'10''）</h3> <h4 id="_5-4-1-「label-标签」内容"><a href="#_5-4-1-「label-标签」内容" class="header-anchor">#</a> 5.4.1 「label 标签」内容</h4> <ul><li>问题 1：<code>label</code> 标签的作用是什么？</li> <li>问题 2：<code>label</code> 标签的使用步骤是什么？</li> <li>问题 3：<code>label</code> 标签和 <code>input</code> 标签是<strong>父子关系</strong>还是<strong>兄弟关系</strong>？为什么？</li> <li>问题 4：<code>label</code> 标签是双标签还是单标签？为什么？</li></ul> <h4 id="_5-4-2-「label-标签」重点"><a href="#_5-4-2-「label-标签」重点" class="header-anchor">#</a> 5.4.2 「label 标签」重点</h4> <ul><li><code>label</code> 可以和表单中的元素绑定，增加点击范围，提高用户体验；</li> <li><code>label</code> 标签的使用步骤：
<ol><li>给要绑定的 <code>input</code> 标签设置<strong>唯一</strong>的 <code>id</code> 属性值；</li> <li>使用 <code>&lt;label for=&quot;控件id&quot;&gt;标签文字&lt;/label&gt;</code> 让 <code>label</code> 标签与对应控件绑定。</li></ol></li></ul> <h4 id="_5-4-3-「label-标签」课堂练习-05-00"><a href="#_5-4-3-「label-标签」课堂练习-05-00" class="header-anchor">#</a> 5.4.3 「label 标签」课堂练习（05'00'')</h4> <ul><li>修改 <code>05-表单练习.html</code>，使用 <code>label</code> 标签<strong>提升用户体验</strong>。</li></ul> <h3 id="_5-5☆-select-下拉表单-08-38"><a href="#_5-5☆-select-下拉表单-08-38" class="header-anchor">#</a> 5.5☆ select 下拉表单（08'38''）</h3> <h4 id="_5-5-1-「select-下拉表单」内容"><a href="#_5-5-1-「select-下拉表单」内容" class="header-anchor">#</a> 5.5.1 「select 下拉表单」内容</h4> <ul><li>问题 1：下拉列表的应用场景是什么？</li> <li>问题 2：下拉列表的标签有几个？分别代表什么含义？</li> <li>问题 3：要默认选中某一个选项，使用哪一个属性？能优化吗？</li></ul> <h4 id="_5-5-2-「select-下拉表单」重点"><a href="#_5-5-2-「select-下拉表单」重点" class="header-anchor">#</a> 5.5.2 「select 下拉表单」重点</h4> <ul><li><p>选项太多，希望节约空间，提升用户体验时可以使用下拉列表；</p></li> <li><p>拉列表的基本语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>选项 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>选项 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>选项 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>三个下拉列表的标签：</p> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>select</code></td> <td>下拉列表</td></tr> <tr><td>2</td> <td><code>option</code></td> <td>下拉列表选项，用于存放选项内容</td></tr></tbody></table></li> <li><p>使用 <code>selected</code> 属性能够默认选中某一项。</p></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>与 <code>checked</code> 类似，在 H5 中 selected=&quot;selected&quot; 可以简写为 selected。</p></div> <h4 id="_5-5-3-「select-下拉表单」课堂练习-05-00"><a href="#_5-5-3-「select-下拉表单」课堂练习-05-00" class="header-anchor">#</a> 5.5.3 「select 下拉表单」课堂练习（05'00'')</h4> <ul><li><p>修改 <code>05-表单练习.html</code>，增加<strong>籍贯</strong>的下拉列表。</p> <div class="language-html extra-class"><pre class="language-html"><code>籍<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>贯：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>安徽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>北京<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token punctuation">&gt;</span></span>火星<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ul> <h2 id="_6☆-表单总结和案例-第-6-节课"><a href="#_6☆-表单总结和案例-第-6-节课" class="header-anchor">#</a> 6☆. 表单总结和案例（第 6 节课）</h2> <h3 id="_6-1☆-textarea-文本域标签-05-13"><a href="#_6-1☆-textarea-文本域标签-05-13" class="header-anchor">#</a> 6.1☆ textarea 文本域标签（05'13''）</h3> <h4 id="_6-1-1-「textarea-文本域标签」内容"><a href="#_6-1-1-「textarea-文本域标签」内容" class="header-anchor">#</a> 6.1.1 「textarea 文本域标签」内容</h4> <ul><li>问题 1：文本域的应用场景是什么？</li> <li>问题 2：如何设置文本域的默认值？</li> <li>问题 3：文本域双标签内部的空格与其他位置的空格有什么区别吗？为什么？</li></ul> <h4 id="_6-1-2-「textarea-文本域标签」重点"><a href="#_6-1-2-「textarea-文本域标签」重点" class="header-anchor">#</a> 6.1.2 「textarea 文本域标签」重点</h4> <ul><li><p>如果需要输入<strong>大量文字并且需要换行</strong>时，可以使用文本域，例如：个人简介等、留言板、评论；</p></li> <li><p>文本域的基本语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>写在双标签内部的文字就是文本域的默认值，一般默认值从后台加载，开发时无需指定初始值。</p></li></ul> <h4 id="_6-1-3-「textarea-文本域标签」课堂练习-05-00"><a href="#_6-1-3-「textarea-文本域标签」课堂练习-05-00" class="header-anchor">#</a> 6.1.3 「textarea 文本域标签」课堂练习（05'00'')</h4> <ul><li><p>修改 <code>05-表单练习.html</code>，增加<strong>简介</strong>的文本域。</p> <div class="language-html extra-class"><pre class="language-html"><code>简<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>介：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ul> <h3 id="_6-2☆-表单元素几点总结-02-55"><a href="#_6-2☆-表单元素几点总结-02-55" class="header-anchor">#</a> 6.2☆ 表单元素几点总结（02'55''）</h3> <blockquote><p>表单元素的知识点总结视频。</p></blockquote> <h3 id="_6-3-学会查阅文档-06-14"><a href="#_6-3-学会查阅文档-06-14" class="header-anchor">#</a> 6.3 学会查阅文档（06'14''）</h3> <blockquote><p>分享学习方法视频。</p></blockquote> <ol><li><p>分享一个认知 —— 现代社会需要的是知识<strong>检索的能力</strong>，而不是知识储备的能力。</p> <ul><li>永远不要用百度，搜索尽量用英文。</li> <li>推荐 bing.com 微软的搜索引擎</li></ul></li> <li><p>分享一个认知 —— 分享是程序员重要的美德</p> <ul><li>可以在掘金发表自己的学习感悟，文章不需要很长，但是需要是干货，而且要保持更新频率；</li> <li>github.com 注册一个账号，可以把自己的练习代码发布到 github.com 开源（万一火了呢）；</li> <li>MDN 注册一个账号，有能力的情况下，尝试翻译其中的文章片段。</li></ul></li></ol> <h3 id="_6-4-综合案例-注册页面-一-08-22"><a href="#_6-4-综合案例-注册页面-一-08-22" class="header-anchor">#</a> 6.4 综合案例-注册页面(一)（08'22''）</h3> <blockquote><p>案例分析思路视频，后续实现留作作业。</p></blockquote> <h2 id="_7-附录"><a href="#_7-附录" class="header-anchor">#</a> 7. 附录</h2> <h3 id="_7-1-标签"><a href="#_7-1-标签" class="header-anchor">#</a> 7.1 标签</h3> <h4 id="_7-1-1-表格标签"><a href="#_7-1-1-表格标签" class="header-anchor">#</a> 7.1.1 表格标签</h4> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>table</code></td> <td>表格标签，用于包含多个 <code>tr</code></td></tr> <tr><td>2</td> <td><code>tr</code></td> <td>定义表格中的行，用于包含多个 <code>td</code></td></tr> <tr><td>3</td> <td><code>td</code></td> <td>定义表格中的单元格，用于存放单元格内容</td></tr> <tr><td>4</td> <td><code>th</code></td> <td>定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示</td></tr> <tr><td>5</td> <td><code>thead</code></td> <td>定义表格头部（标题行），必须拥有 <code>tr</code> 标签</td></tr> <tr><td>6</td> <td><code>tbody</code></td> <td>定义表格的主体，通常包含标题行下方的表格数据区域</td></tr></tbody></table> <h4 id="_7-1-2-列表标签"><a href="#_7-1-2-列表标签" class="header-anchor">#</a> 7.1.2 列表标签</h4> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>ul</code></td> <td>无序列表，只允许包含多个 <code>li</code> 标签</td></tr> <tr><td>2</td> <td><code>ol</code></td> <td>有序列表，只允许包含多个 <code>li</code> 标签</td></tr> <tr><td>3</td> <td><code>li</code></td> <td>用于存放列表项内容</td></tr> <tr><td>4</td> <td><code>dl</code></td> <td>自定义列表，只允许包含 <code>dt</code> 和 <code>dd</code> 标签</td></tr> <tr><td>5</td> <td><code>dt</code></td> <td>用于存放关键词内容，与 <code>dd</code> 是兄弟关系，不过后续的 <code>dd</code> 都跟随前面的 <code>dt</code></td></tr> <tr><td>6</td> <td><code>dd</code></td> <td>用于存放前面 <code>dt</code> 关键词的列表项内容</td></tr></tbody></table> <h4 id="_7-1-3-表单标签及属性"><a href="#_7-1-3-表单标签及属性" class="header-anchor">#</a> 7.1.3 表单标签及属性</h4> <ul><li><p>表单标签</p> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>form</code></td> <td>定义表单域，统一收集传递数据</td></tr> <tr><td>2</td> <td><code>input</code></td> <td>输入控件，可以是文本框、单选、复选、选择文件、按钮等</td></tr> <tr><td>3</td> <td><code>select</code></td> <td>下拉列表</td></tr> <tr><td>4</td> <td><code>option</code></td> <td>下拉列表选项，用于存放选项内容</td></tr></tbody></table></li> <li><p><code>input</code> 标签的常用属性：</p> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>type</td> <td>类型</td></tr> <tr><td>name</td> <td>名称，用于区分控件</td></tr> <tr><td>value</td> <td>值，用于记录或设置控件的值</td></tr> <tr><td>checked</td> <td>默认选中某个单选或复选框</td></tr> <tr><td>id</td> <td>控件标识，与 <code>label</code> 标签联用</td></tr> <tr><td>maxlength</td> <td>输入框最大输入长度</td></tr></tbody></table></li> <li><p><code>input</code> 标签 <code>type</code> 的常用属性值：</p> <table><thead><tr><th>类型</th> <th>属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>输入</td> <td>text</td> <td>输入文字</td></tr> <tr><td>输入</td> <td>password</td> <td>密码</td></tr> <tr><td>选择</td> <td>radio</td> <td>单选按钮，多选一</td></tr> <tr><td>选择</td> <td>checkbox</td> <td>复选框（打勾）</td></tr> <tr><td>点击选择文件</td> <td>file</td> <td>文件上传使用</td></tr> <tr><td>点击</td> <td>button</td> <td>按钮</td></tr> <tr><td>点击</td> <td>image</td> <td>按钮</td></tr> <tr><td>表单操作</td> <td>submit</td> <td>提交，会把数据发送给服务器</td></tr> <tr><td>表单操作</td> <td>reset</td> <td>重置，会清空表单所有数据</td></tr></tbody></table></li></ul> <h3 id="_7-2-快捷键"><a href="#_7-2-快捷键" class="header-anchor">#</a> 7.2 快捷键</h3> <h4 id="_7-2-1-vscode-快捷键"><a href="#_7-2-1-vscode-快捷键" class="header-anchor">#</a> 7.2.1 VSCode 快捷键</h4> <table><thead><tr><th>快捷键</th> <th>作用</th></tr></thead> <tbody><tr><td>ctrl + n</td> <td>新建文件</td></tr> <tr><td>ctrl + s</td> <td>保存文件</td></tr> <tr><td>ctrl + z</td> <td>撤销</td></tr> <tr><td>ctrl + shift + z</td> <td>恢复撤销</td></tr> <tr><td>ctrl + 加号 / 减号</td> <td>放大 / 缩小</td></tr> <tr><td>ctrl + c / v</td> <td>复制粘贴一行（不能选中文字）</td></tr> <tr><td>ctrl + x</td> <td>删除一行</td></tr> <tr><td>alt + ↑ / ↓</td> <td>上下移动代码</td></tr> <tr><td>alt + shift + ↑ / ↓</td> <td>上下复制一行代码</td></tr> <tr><td>ctrl + /</td> <td>注释</td></tr> <tr><td>ctrl + d</td> <td>向后多选相同的内容</td></tr> <tr><td>alt + z</td> <td>自动换行</td></tr></tbody></table> <h4 id="_7-2-2-emmet-语法"><a href="#_7-2-2-emmet-语法" class="header-anchor">#</a> 7.2.2 Emmet 语法</h4> <div class="language-emmet extra-class"><pre class="language-text"><code>ul&gt;li*6{h$}

dl&gt;dt+dd*3
</code></pre></div><h3 id="_7-3-单词表"><a href="#_7-3-单词表" class="header-anchor">#</a> 7.3 单词表</h3> <h4 id="_7-3-1-重点单词"><a href="#_7-3-1-重点单词" class="header-anchor">#</a> 7.3.1 重点单词</h4> <table><thead><tr><th>序号</th> <th>英语</th> <th>中文</th></tr></thead> <tbody><tr><td>1</td> <td>table</td> <td>表格</td></tr> <tr><td>2</td> <td>row</td> <td>行</td></tr> <tr><td>3</td> <td>data</td> <td>数据</td></tr> <tr><td>4</td> <td>align</td> <td>对齐</td></tr> <tr><td>5</td> <td>left</td> <td>左</td></tr> <tr><td>6</td> <td>center</td> <td>中</td></tr> <tr><td>7</td> <td>right</td> <td>右</td></tr> <tr><td>8</td> <td>cell</td> <td>单元格</td></tr> <tr><td>9</td> <td>spacing</td> <td>外部彼此间的间距</td></tr> <tr><td>10</td> <td>padding</td> <td>内边距（填充物）内容距离边框的距离</td></tr> <tr><td>11</td> <td>row</td> <td>行</td></tr> <tr><td>12</td> <td>col / column</td> <td>列</td></tr> <tr><td>13</td> <td>term</td> <td>术语</td></tr> <tr><td>14</td> <td>input</td> <td>输入</td></tr> <tr><td>15</td> <td>select</td> <td>选择</td></tr> <tr><td>16</td> <td>selected</td> <td>已选中</td></tr> <tr><td>17</td> <td>area</td> <td>区域</td></tr> <tr><td>18</td> <td>type</td> <td>类型</td></tr> <tr><td>19</td> <td>submit</td> <td>提交</td></tr> <tr><td>20</td> <td>reset</td> <td>重置</td></tr> <tr><td>21</td> <td>name</td> <td>姓名、名称</td></tr> <tr><td>22</td> <td>value</td> <td>值</td></tr> <tr><td>23</td> <td>radio</td> <td>单选框</td></tr> <tr><td>24</td> <td>checkbox</td> <td>多选框</td></tr> <tr><td>25</td> <td>option</td> <td>选项</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/html/day01.html" class="prev">
        HTML 第 01 天
      </a></span> <span class="next"><a href="/basenode/html/html-note.html">
        HTML 笔记
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/10.0fd16134.js" defer></script>
  </body>
</html>
